import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { DjRankingCoverWrapper } from './style'
import { getImageSize } from '@/utils/HandlerImg'
import { message } from 'antd'
import type { djRadioRecommendType } from '@/views/discover/c-page/djradio/store/type'


interface IProps {
  children?: ReactNode
  data: djRadioRecommendType
}

const DjRankingCover: React.FC<IProps> = (props) => {
  const [messageApi, contextHolder] = message.useMessage()
  const { data } = props
  return (
    <DjRankingCoverWrapper>
      {contextHolder}
      <a onClick={() => {
          messageApi.open({
            type: 'success',
            content: `当前选择的电台: ${data.name}`
          })
        }}>
        <img src={getImageSize(data.picUrl, 120)} alt="" />
      </a>
      <div className="info">
        <h2 className="title">{data.name}</h2>
        <div className="nickname sprite_icon2">
          <i className="sprite_icon2 left"></i>
          {data.dj.nickname}
        </div>
        <div className="count">
          <span className="phase">共{data.programCount}期</span>
          <span className="subscribe">订阅{data.subCount}次</span>
        </div>
      </div>
    </DjRankingCoverWrapper>
  )
}

export default memo(DjRankingCover)
